<template>
  <div class="serach-detail-page">
    <!-- 搜索导航 -->
    <company-search
      @search="searchs"
      @changeVal="changeVal"
      :currentVal="detail_value"
      @onClearInputVal="toClearInputVal"
    ></company-search>
    <div class="search-detail">
      <div class="listDiv">
        <div class="list" v-for="(item, index) in noticeList" :key="index">
          <div class="character">{{ item.intro }}</div>
          <van-row gutter="20" class="photos" v-if="Array.isArray(item.imgurl)">
            <van-col span="8" v-for="(image, index) in item.imgurl" :key="index">
              <van-image width="110" height="110" :src="image" @click="bigImage(image)" />
            </van-col>
          </van-row>
          <van-row gutter="20" class="photos" v-else>
            <van-col span="8">
              <van-image
                width="110"
                height="110"
                v-if="item.imgurl !== null"
                :src="item.imgurl"
                @click="bigImage(item.imgurl)"
              />
            </van-col>
          </van-row>
          <div class="notice-bottom">
            <div class="bottom-content">
              <div class="notice-name">{{ item.addusername }}</div>
              <div class="notice-time">{{ item.createdate }}</div>
              <div class="notice-type" v-if="active == 0">{{ item.type == 0 ? '公告通知' : '公告任务' }}</div>
            </div>
          </div>
        </div>
        <div class="tips">没有更多了</div>
      </div>
      <div class="detail-wrap">
        <van-tabbar v-model="active" class="company-tarbar" active-color="#ee0a24">
          <van-tabbar-item :icon="item.icon" @click="onTarbar(index)" v-for="(item, index) in tarBarValue" :key="index"
            >{{ item.value }}
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script>
import {ImagePreview} from 'vant'
import comNoticeItem from '../../components/comNoticeItem'
import companySearch from '../../components/comCompanySearchNav'
import ComNoticeListOper from '../../components/comNoticeListOper.vue'

export default {
  components: {
    comNoticeItem,
    companySearch,
    ComNoticeListOper
  },
  data() {
    return {
      message: '',
      photos: '',
      companyId: '',
      detail_value: '',
      active: 0,
      noticeList: [],
      tarBarValue: [
        {
          value: '公告首页',
          icon: 'home-o'
        },
        {
          value: '公告通知',
          icon: 'comment-o'
        },
        {
          value: '公告任务',
          icon: 'todo-list-o'
        }
      ]
    }
  },
  async created() {
    this.detail_value = this.$route.params.key
    const comMesRes = await this.$api.myCompany.reqGetCompanyMes()
    this.companyId = comMesRes.data.id
    this.getNotice()
  },
  methods: {
    searchs(val) {
      this.detail_value = val
      this.getNotice()
    },
    changeVal(val) {
      this.detail_value = val
    },
    toClearInputVal() {
      this.detail_value = ''
      this.getNotice()
    },
    bigImage(img) {
      ImagePreview({
        images: [img],
        closeable: true
      })
    },
    onTarbar(index) {
      this.active = index
      this.getNotice()
    },
    //查询公司公告
    async getNotice() {
      const formData = {
        company_id: this.companyId,
        type: this.active - 1,
        key: this.detail_value
      }
      console.log(formData)
      const res = await this.$api.company.reqGetComNotice(formData)
      this.noticeList = res.data.items
      this.noticeList.forEach(element => {
        if (element.imgurl != null && element.imgurl.indexOf(',') != -1) {
          element.imgurl = element.imgurl.split(',')
        }
      })
    }
  }
}
</script>

<style lang="scss" scroped>
.serach-detail-page {
  .list {
    border-bottom: 0.02667rem solid #ebedf0;

    .notice-bottom {
      margin: 0 0.42667rem;
      margin-bottom: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #999;

      .bottom-content {
        display: flex;
        align-items: center;

        .notice-type {
          margin-left: 1.5rem;
        }

        .notice-name {
          margin-right: 5px;
        }

        .notice-time {
          margin-top: 0.03rem;
        }
      }

      .bottom-boole {
        margin-right: 10px;
        color: #3d2c63;
      }
    }

    .character {
      margin: 0 0.42667rem;
      margin-top: 0.3rem;
      padding: 0.1rem 0;
      font-size: 0.37333rem;
    }

    .photos {
      padding: 0.26667rem 0.42667rem;

      .van-col {
        margin-bottom: 10px;
      }
    }
  }

  .listDiv {
    .tips {
      margin-top: 1.33333rem;
      padding-bottom: 3rem;
      text-align: center;
    }
  }

  .search-detail {
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 0 5px;

    .detail-wrap {
      height: 100%;
      // background: white;
      .search-tab {
        height: 100%;
        border-top: 2px solid #f8f8f8;

        .van-tabs__content--animated {
          height: 100%;

          .van-tab__pane {
            overflow: scroll;
            height: 100%;
            // padding-bottom: 1.3rem;
            // border-top: 2px solid #f2f2f2;
          }
        }

        .van-tabs__line {
          background: #4eaed6fa;
        }
      }
    }
  }
}
</style>
